<template>
<div>
  <daya-drawer v-if="menu.length>0" :open="daya_show_drawer" ref="drawer">
    <template v-slot>

      <view style="padding: 30rpx 40rpx; color: #34aaff" @click="onClassifyClick(0)">-全部-</view>
        <!-- :key="'menu_class_'+menu_item.id"-->
        <view  v-if="home_tpl_id==0"  v-for="(menu_item, index) in menu" :key="menu_item.id"  >
        <view v-if="home_tpl_id==0" style="padding: 30rpx 40rpx; color: #34aaff" v-for="item in menu_item.home_tpl_class_list" :key="item.id" @click="onClassifyClick(item.id)">{{ item.title }}</view>
      </view>

      <view v-if="home_tpl_id>0" style="padding: 30rpx 40rpx; color: #34aaff" v-for="item in home_tpl_class_list" :key="item.id" @click="onClassifyClick(item.id)">{{ item.title }}</view>

    </template>
  </daya-drawer>

  <!-- @touchstart="openStartDrawerFn" -->
	<div class="errand "  @touchmove="openMoveDrawerFn"  @touchend="openEndDrawerFn">



      <daya-store-filter
          v-if="query_more"
          :app_city="app_city"
          :prop_query="query"
          :prop_query_more="query_more"
          @closeStoreFilter="closeStoreFilter"
          @updateQueryX="updateQuery"
      ></daya-store-filter>

		<daya-clone-navbar :prop_clone_navbar="clone_navbar" :prop_is_ipx="is_ipx"/>

    <!-- #ifdef APP-PLUS -->
    <view style="height: 1px;background-color: #FFCD36;" class="w-full h-0"></view>
    <!-- #endif -->

		<!-- #ifdef H5 || APP-PLUS || MP -->
    <!--地址显示+首页-->
		<!--<view class=" h-12  flex  justify-between items-center bg-yellow-400" style="background-color: #FFCD36;">-->

    <!--  <view-->
    <!--      @click.stop="goToPageUrl('/ymq_canyino2o/pages/daya-city/daya-city')"-->
    <!--      class="flex justify-start items-center absolute left-2 ">-->
    <!--    <image class="w-5 h-5" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>-->
    <!--    <view>{{app_city || '全国'}}</view>-->
    <!--    <image class="w-5 h-5" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>-->
    <!--  </view>-->

    <!--  <view class="w-10 h-full"></view>-->
    <!--  <view class=" felx-1 text-center text-xl text-white">首页</view>-->
    <!--  <view class="w-10 h-full"></view>-->

		<!--</view>-->

    <view class=" h-12 flex  justify-between items-center bg-yellow-400 px-4 py-2 text-black">
      <view
          @click.stop="goToPageUrl('/ymq_canyino2o/pages/daya-city/daya-city')"
          class="w-1/3 mr-5 flex justify-start items-center " style="width: 33%;">
        <image class="w-4 h-4" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>
        <view>{{app_city || '全国'}}</view>
        <image class="w-4 h-4" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>
      </view>

      <view class="flex-1 ">
        <u-search
            placeholder="搜索店铺"
            :height="64"
            bgColor="#ffffff"
            :showAction="true"
            actionText="搜索"
            :animation="true"
            :value="query.keywords"
            @clear="query.keywords=''"
            @custom="searchKeyword"
            @search="searchKeyword"
            :actionStyle="{
              color: '#ffffff',
              border: '1px solid #ff0000',
              borderRadius: '4px',
              padding: '4px 0'
            }"
        ></u-search>
      </view>
    </view>
		<!-- #endif -->

		<!-- #ifdef MP -->
		<!--<view class="head"-->
    <!--      @click.stop="goToPageUrl('/ymq_canyino2o/pages/daya-city/daya-city')"-->
		<!--			:style="'height:' + navBarHeight + 'px'"-->
		<!--&gt;-->
		<!--	<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>-->
    <!--  <view>{{app_city || '全国'}}</view>-->
		<!--	<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>-->
		<!--</view>-->
		<!-- #endif -->

		<!--<navigator url="/ymq_canyino2o/pages/distribution/core">TEST</navigator>-->
		<!--<navigator url="/ymq_canyino2o/pages/sjzx/login">商家中心登录</navigator>-->


    <u-skeleton rows="3" :loading="page_loading" :animation="true" bgColor="#000">

    <div  class="nav ">
			<div v-if="home_tpl_id>0" class="nav-bottom">
				<div class="nav-bottom_item" v-for="item in home_tpl_nav_list" :key="item.id"
				@tap="jumps"
				:data-appid="item.appid"
				:data-id="item.id"
				:data-name="item.title"
				:data-src="item.url"
				:data-type="item.item"
				:data-wb_src="item.src2"
				:src="item.logo"
				>
					<image :src="item.logo" mode="scaleToFill" />
					<text>{{ item.title }}</text>
				</div>
			</div>

      <swiper :autoplay="true" v-if="home_tpl_id==0"  class="p-0 my-2" style="min-height: 370rpx;">
            <!--:key="'menu_nav_'+menu_item.id" -->
            <swiper-item  v-for="(menu_item, menu_nav_index) in menu" :key="menu_nav_index"   class="p-0 m-0">

          <div class="nav-bottom">
                <!--:key="'menu_nav_item_'+item.id"-->
                <div class="nav-bottom_item" v-for="(item,menu_item_index) in menu_item.home_tpl_nav_list" :key="menu_item_index"
				@tap="jumps"
				:data-appid="item.appid"
				:data-id="item.id"
				:data-name="item.title"
				:data-src="item.url"
				:data-type="item.item"
				:data-wb_src="item.src2"
				:src="item.logo"
				>
              <image :src="item.logo" mode="scaleToFill" />
              <text>{{ item.title }}</text>
            </div>
          </div>
        </swiper-item>
      </swiper>

		</div>
    </u-skeleton>

    <view>
      <u-notice-bar :fontSize="32" text="招送餐员，全职兼职皆可，有意点我"></u-notice-bar>
    </view>

		<div class="swiper ">
			<!--<uni-swiper-dot class="uni-swiper-dot-box" field="content">-->
				<swiper :current="swipper_index" class="swiper-box">
          <swiper-item v-for="(item, home_tpl_ad_index) in home_tpl_ad_list" :key="home_tpl_ad_index">
						<image
                class="img"
                @tap="jumps"
                :data-appid="item.appid"
                :data-id="item.id"
                :data-name="item.title"
                :data-src="item.src"
                :data-type="item.item"
                :data-wb_src="item.src2"
                :src="item.logo"
                mode="" style="height: 100%;width: 100%;"></image>
					</swiper-item>
				</swiper>
			<!--</uni-swiper-dot>-->
		</div>

		<!--骑手订单-->
		<image class="page-fixed-round-btn  fixed-left-icon" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/orders.png" mode="scaleToFill" @click="onRiderList" />
    <!--社区服务站-->
		<image class="page-fixed-round-btn  fixed-riight-icon" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/kefu.png" mode="scaleToFill" @click="onServiceList" />
		<!--左侧红竖线 @click="openClassify"-->
		<!--左侧红竖线-->
    <!-- <image  @touchstart="openStartDrawerFn" class="page-fixed-rect-btn  left-fixed " src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/hongshuxian.png" mode="scaleToFill" /> -->
    <image  @touchstart="openStartDrawerFn" style="width: 60rpx;" class="page-fixed-rect-btn  left-fixed " src="/static/yellow_line.jpg" mode="scaleToFill" />
    <!--购物车-->
		<image class="page-fixed-round-btn  shop" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/bugcar.png" mode="scaleToFill" @click="onBuyCarList" />

		<div class="menu">
			<div class="menu-left">附近商家</div>
			<!--首页模板分类-->
			<div class="menu-right">
				<div class="" :class="['menu-item', home_tpl_id === item.id ? 'active' : '']" v-for="(item, index) in menu" :key="item.id" @click="onMenuClick(index,item)">
					{{ item.title }}
				</div>
			</div>
		</div>
		<div class="filter">
			<div class="filter-item"
				@click="query.by=''"
			>
				综合排序
				<image v-show="query.by==''"  class="w-3 h-3 ml-1"  src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
			</div>
			<div class="filter-item"
					 @click="query.by='juli asc'"
			>离我最近
				<image v-show="query.by=='juli asc'"  class="w-3 h-3 ml-1" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
			</div>

			<!--<div class="filter-item"-->
			<!--		 :class="query.yhhd?'query-active':''"-->
			<!--&gt;会员红包</div>-->

			<div @click="query_more=!query_more"
           class="flex justify-center items-center"
      >
        <u-badge class="mr-1" style="margin-left: 5px;" v-show="query.keywords!='' || query.ps_type || query.juli || query.ps_sudu || query.is_brand || query.xyh_open || query.dy_is_service_station || query.is_select  || query.is_yuepay  || query.type_id  || query.is_open  || query.nopsf || query.nostart || query.yhhd || query.is_ps || query.is_zt" type="warning" max="99" :isDot="true"></u-badge>
        <text>筛选</text>
        <image class="w-3 h-3 ml-1" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
      </div>
		</div>
		<div  v-if="query_more" class="filter-wrapper" >
			<div class="items" @click="query.yhhd=!query.yhhd"
					 :class="query.yhhd?'query-active':''"
			>会员红包</div>
			<div class="items" @click="query.nopsf=!query.nopsf"
					 :class="query.nopsf?'query-active':''"
			>无配送费</div>
			<div class="items" @click="query.nostart=!query.nostart"
					 :class="query.nostart?'query-active':''"
			>无起送费</div>
		</div>
    <div class="store">
      <u-skeleton :loading="page_loading" :animation="true" :rows="5"  :avatar="false" :title="false" rowsWidth="'100%'" rowsHeight="50px" >
      <div v-for="store in store_list" :key="store.id"
           @click="goToPageUrlLogin('/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' + store.id)"
           class=" store-item">
        <image :src="store.logo" mode="scaleToFill" />
        <div class="right">
          <div class="name">{{ store.name }}</div>
          <div class="score">
            <div class="pinfen">
              <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
              <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
              <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
              <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
              <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/no-star.jpg" mode="scaleToFill" />
            </div>
            <div class="sales">月售{{store.sales || 0}}</div>
            <!--<div class="time">40分钟 | {{store.juli_text}}</div>-->
            <div class="time">{{store.juli_text || '0km'}}</div>
          </div>
          <div class="bottom">
            <div class="price">起送价￥{{store.start_at || 0}} | 配送费￥{{store.freight || 0}}</div>
            <div class="btn">去购买</div>
          </div>
        </div>
      </div>
      <u-loadmore fontSize="'14px'" height="'50px'" :dashed="false" :line="true" :status="loadmore_status" />

      </u-skeleton>
    </div>

		<uni-popup ref="popup" background-color="#fff">
			<ul style="width: 250rpx">
				<li style="padding: 30rpx 40rpx; color: #34aaff" @click="onClassifyClick(0)">-全部-</li>
          <!--:key="'menu_class_'+menu_item.id"-->
          <block  v-if="home_tpl_id==0"  v-for="(menu_item, menu_item_index) in menu" :key="menu_item_index"  >
          <li v-if="home_tpl_id==0" style="padding: 30rpx 40rpx; color: #34aaff" v-for="item in menu_item.home_tpl_class_list" :key="item.id" @click="onClassifyClick(item.id)">{{ item.title }}</li>
        </block>
				<li v-if="home_tpl_id>0" style="padding: 30rpx 40rpx; color: #34aaff" v-for="item in home_tpl_class_list" :key="item.id" @click="onClassifyClick(item.id)">{{ item.title }}</li>
			</ul>
		</uni-popup>
		<div style="height: 100px;"></div>

    <gcm-red-bag :showRegBag="share_result" :money="share_money" :options="redBagConfig" @onConfirm="redBagConfirm"></gcm-red-bag>

	</div>
	</div>
</template>

<script>
import QQMapWX from "@/ymq_canyino2o/utils/qqmap-wx-jssdk";

var app = getApp();
export default {
	components: {},
	data() {
		return {
      daya_show_drawer:false,

      share_result:false, //展示分享有礼的红包界面
      share_money:0, //分享有礼的红包金额
      redBagConfig: {
        btnText: "确认收到",
      },


      app_city: '',

			page_loading:true,
      loadmore_status:'loadmore',
			query:{
        app_city: '',
				lat:0,//纬度
				lng:0,//经度
				md_type:0,//0=不限 40=热门 41=好店
				home_tpl_type_id:0,//所属模板类型(查数据库或后台)  0=不限 其他为首页模板id
        home_tpl_class_id:0,//小分类id
				page:0,
				pagesize:10,

        keywords: '', //店铺名称关键字搜索
        by: '', //排序字段 number+asc 排序
        ps_type: '', //配送方式: ps_type=sj商家配送 dada达达配送 kfw快服务 pt平台超级跑腿 sss闪时送
        juli: 0, //距离范围 2 3 5
        ps_sudu: 0, //配送速度时间范围内,分钟 40 50 60
        is_brand:0,//品质优选
        xyh_open:0,//新用户立减
        dy_is_service_station:0,//新用户立减
        is_select:0,//精选好店
        is_yuepay:0,//余额支付
        type_id:0,//门店类型 40=热门 41=好店
        is_open:0,//是否营业
        nopsf:0,//无配送费
        nostart:0,//无起送费用
        yhhd:0,//优惠活动
        is_ps:0,//外卖配送
        is_zt:0,//到店用餐
			},
			store_order:"", //排序字段+排序方式
			store_list:[],
			// navs: [],
			home_tpl_id: 0, //首页模板id
			current_menu_index: 0,
			navBarHeight: 0,
			menu: [],
			home_tpl_nav_list: [],
			home_tpl_class_list: [],
			query_more: false,
			swipper_index: 0,
			home_tpl_ad_list: []
		};
	},
	computed: {
	},
	watch: {
		//query对象
		query: {
			handler: function (newVal, oldVal) {
				this.query.page = 1;
				//防抖,无论触发多少次,只执行最后一次  单位ms
				uni.$u.debounce(this.load_store_list, 200)
			},
			deep: true
		},
    app_city(val, oldVal) {
      if (val != oldVal) {
        this.query.app_city = val
        app.globalData.app_city=val
        this.load_store_list()
      }
    }
	},
	created() {
    //如果已经登录了商家身份,则直接跳转到商家中心
    let store_is_login = uni.getStorageSync('store_is_login') ? true : false;
    if(store_is_login){
      this.goToPageUrl('/ymq_canyino2o/pages/sjzx/wmdd/wmdd')
    }
	},
	mounted() {

    this.app_city = uni.getStorageSync('app_city')
    if (this.app_city=='' || this.app_city==undefined){
      this.app_city = ''
    }

    app.globalData.app_city=this.app_city


		this.getTemplateNavAd();
		// this.load_store_list();
		this.load_gps_store();
	},

	// 页面周期函数--监听页面加载
	onLoad(t) {
    this.get_uni_cloud_im_config();
		app.globalData.setNavigationBarColor(this);
		this.appPageOnLoad(app);
    // setTimeout(()=>{
    //   this.onLoadClone3389(t);
    // },100)

		// #ifdef MP-WEIXIN
		const systemInfo = wx.getSystemInfoSync();
		// 胶囊按钮位置信息
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
		// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
		const navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
		this.navBarHeight = navBarHeight;

		// #endif

	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() {},
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() {

    this.app_city = uni.getStorageSync('app_city')
    if (this.app_city=='' || this.app_city==undefined){
      this.app_city = ''
    }

    app.globalData.app_city=this.app_city

    if (uni.getStorageSync('share_result')) {
      this.share_result=true
    }else {
      this.share_result=false
    }

    this.share_money = uni.getStorageSync('share_money');

    console.log("this.share_result",this.share_result)
    console.log("this.share_money",this.share_money)
  },
	// 页面周期函数--监听页面隐藏
	onHide() {},
	// 页面周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
  onReachBottom() {
    if (this.loadmore_status == 'nomore'){
      return
    }
    this.loadmore_status = 'loading';
    this.query.page =  this.query.page+1;
  },
	methods: {
    get_uni_cloud_im_config() {
      //请求 uni_cloud_im_config 接口
      app.globalData.util.request({
        url: 'entry/wxapp/uni_cloud_im_config',
        success: function (res) {
          console.log("UNIAPP云配置", res)
          if (res.data.code == 1) {
            uni.setStorageSync('client_uniapp_id', res.data.data.client_uniapp_id)
            uni.setStorageSync('runner_uniapp_id', res.data.data.runner_uniapp_id)

            console.log("client_uniapp_id", uni.getStorageSync('client_uniapp_id'))
            console.log("runner_uniapp_id", uni.getStorageSync('runner_uniapp_id'))
          }
        }
      })
    },
    onLoadClone3389(t) {
      var that=this

      if (app.globalData.xtxx) {
        app.globalData.xtxx1=app.globalData.xtxx
        uni.setNavigationBarTitle({
          title: app.globalData.xtxx.url_name
        });
        that.setData({
          mdxx: app.globalData.xtxx
        });
        uni.setStorageSync('bqxx', app.globalData.xtxx);

      }else{
        app.globalData.util.request({
          url: 'entry/wxapp/system',
          cachetime: '0',

          success: function (t) {
            console.log("system", t);
            var n = t.data;
            app.globalData.xtxx=t.data
            app.globalData.xtxx1=t.data

            uni.setNavigationBarTitle({
              title: t.data.url_name
            });
            console.log("system t.data", t.data);
            that.setData({
              mdxx: t.data
            });
            uni.setStorageSync('bqxx', t.data);
          }
        });
      }

      app.globalData.util.request({
        url: 'entry/wxapp/TypeAd',
        cachetime: '0',

        success: function (t) {
          console.log(t.data);
          var a = [];
          if ('1' == app.globalData.xtxx.fl_more) {
            for (e = 0, s = t.data.length, void 0; e < s; e += 8) {
              var e;
              var s;
              a.push(t.data.slice(e, e + 8));
            }
          }
          if ('2' == app.globalData.xtxx.fl_more) {
            for (e = 0, s = t.data.length; e < s; e += 10) {
              a.push(t.data.slice(e, e + 10));
            }
          }
          console.log("navs", a);
          that.setData({
            navs: a
          });
        }
      });

    },
    jumps: function (t) {
      var a = t.currentTarget.dataset.id;
      var e = t.currentTarget.dataset.name;
      var s = t.currentTarget.dataset.appid;
      var n = t.currentTarget.dataset.src;
      var i = t.currentTarget.dataset.wb_src;
      var o = t.currentTarget.dataset.type;
      console.log("id",a, "name",e, "appid",s, "src",n, "wb_src",i,"type", o);
      1 == o
          ? (console.log(n),
              uni.navigateTo({
                url: n
              }))
          : 2 == o
              ? (uni.setStorageSync('vr', i),
                  uni.navigateTo({
                    url: '../car/car'
                  }))
              : 3 == o &&
              uni.navigateToMiniProgram({
                appId: s
              });
    },
    searchKeyword(value) {
      this.query.keywords=value
    },

    openStartDrawerFn(e){
      this.$refs.drawer.touchstartFn(e);
    },
    openMoveDrawerFn(e){
      this.$refs.drawer.touchmoveFn(e);
    },
    openEndDrawerFn(e){
      this.$refs.drawer.touchendFn(e);
    },

    closeStoreFilter() {
      this.query_more=false
    },
    updateQuery(val) {
      console.log("updateQuery val",val);
      this.query=val
    },
    redBagConfirm() {
      this.share_result=false
      uni.showToast({
        title: '领取成功,已存入红包中心!',
        icon: 'none',
        duration: 2000
      });


      uni.removeStorageSync('share_result');
      uni.removeStorageSync('share_money');
    },
		load_gps_store() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log("地理位置",res);
					that.query.lat = res.latitude;
					that.query.lng = res.longitude;

					that.load_store_list();
				},
				fail: function(e) {
					that.load_store_list();
				},
			});
		},
		load_store_list() {
			console.log("加载店铺列表数据")
			let that = this;
			///app/index.php?i=2&t=0&v=1.1.1&from=wxapp&c=entry&a=wxapp&do=store_list&m=ymq_canyino2o&page=1
			app.globalData.util.request({
				url: 'entry/wxapp/store_list',
				data:{
					...this.query
				},
				success(res) {
					if (res.data.code==1){
						console.log("店铺数据",res.data.data);
						that.store_list = res.data.data;
            if (res.data.data.length>=that.query.pagesize){
              that.loadmore_status = 'loadmore'; //加载更多
            }else{
              that.loadmore_status = 'nomore' //没有更多了
            }
					}
				},
				complete(){
					that.page_loading=false
				}
			});
		},
		getTemplateNavAd() {
			let that = this;
			app.globalData.util.request({
				url: 'entry/wxapp/home_tpl_type',
				success(res) {
          if (res.data.data == undefined) {
            return
          }
					console.log("首页模板导航类别",res.data.data);
					that.menu = res.data.data;

          that.navBanner = res.data.data[0].home_tpl_nav_list;
          this.swipper_index = 0;
          that.home_tpl_ad_list = res.data.data[0].home_tpl_ad_list;

          //遍历res.data.data,如果其中is_default=='1',则触发onMenuClick
          for (let i=0;i<res.data.data.length;i++){
            if (res.data.data[i].is_default=='1'){
              that.onMenuClick(i,res.data.data[i])
              break
            }
          }
				}
			});
		},
		onMenuClick(index,item) {
			this.current_menu_index = index;
			this.home_tpl_id = item.id;
			this.query.home_tpl_type_id = item.id;
			this.home_tpl_nav_list = item.home_tpl_nav_list;
			this.home_tpl_class_list = item.home_tpl_class_list;
			this.swipper_index = 0;
			this.home_tpl_ad_list = item.home_tpl_ad_list;
		},
		onClassifyClick(class_id=0) {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/shopClassify/index?class_id='+class_id
			});
		},
		openClassify() {
			this.$refs.popup.open('left');
		},
		onServiceList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/serviceList/index'
			});
		},
		onBuyCarList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/takeout/daya_buy_car_list'
			});
		},
		onRiderList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/list'
			});
		},
		toSendandcollect() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/sendandcollect/index?type=1'
			});
		},
		toHotboom() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/hotboom/index'
			});
		},
		toErrand() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/add_order/index'
			});
		}
	}
};
</script>

<style scoped>
.errand {
	position: relative;
	background: #f6f6f6;
	min-height: 100vh;
}
.head {
	background: #FFCD36;
	display: flex;
	align-items: flex-end;
	padding: 10rpx;
}
.head view {
	font-size: 30rpx;
	font-weight: 600;
	padding: 0 4rpx;
}
.head image {
	width: 40rpx;
	height: 40rpx;
}
.nav {
	width: 100vw;
	padding: 10rpx 0;
	background: #f7f78b;
}
.nav text {
	font-weight: 600;
}


.nav-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.nav-bottom image {
	width: 100rpx;
	height: 100rpx;
}
.nav-bottom_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 20%;

  margin-top: 10px;
  margin-bottom: 5px;
}
.nav-bottom_item  image {
  border-radius: 50%;
  background-color: white;
  border: 1px solid #999;
}

.nav-bottom_item:nth-child(1) image {
  border-radius: 10rpx;
  background-color: white;
  border: 1px solid #999;
}

.nav-bottom_item:nth-child(2) image {
  border-radius: 10rpx;
  background-color: white;
  border: 1px solid #999;
}

.nav-bottom_item:nth-child(3){
  width: 42%;
  text-align: center;
}
.nav-bottom_item:nth-child(3) image {
  border-radius: 50%;
  background-color: white;
  border: 1px solid #999;
	width: 180rpx;
	height: 180rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
	position: relative;
	top: -10rpx;
}

.nav-bottom_item:nth-child(3) text {
  display: none;
}



/*.nav-bottom_item:nth-child(8) {*/
/*  display: none;*/
/*}*/

.nav-bottom_item:nth-child(9) {
  display: none;
}

.swiper {
  width: 95%;
	margin: 10rpx auto;
}
.swiper image {
	width: 100%;
	height: 300rpx;
	border-radius: 20rpx;
}

.page-fixed-round-btn{
  background-color: white;
  padding: 10rpx;
  box-shadow: 5rpx 5rpx 15rpx #ccc;
  border-radius: 50%;
  z-index: 10;
}
.page-fixed-rect-btn{
	background-color: white;
	padding: 5rpx;
	box-shadow: 5rpx 2rpx 10rpx #ccc;
	border-radius: 5px;
	z-index: 10;
}
.fixed-left-icon {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	left: 20rpx;
	top: 520rpx;
}
.fixed-riight-icon {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	right: 20rpx;
	top: 520rpx;
}
.left-fixed {
	width: 60rpx;
	height: 300rpx;
	position: fixed;
	left: 0;
	top: 42vh;
  opacity: 0.8;
  box-shadow: 1px 1px 2px #ccc;
	border-top-right-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
}
.menu {
	width: 95%;
	display: flex;
	align-items: flex-start;
	margin: 30rpx auto;
}
.menu-left {
	width: 20%;
	text-align: center;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	position: relative;
}
.menu-left::after {
	content: ' ';
	display: block;
	width: 20%;
	height: 15rpx;
	background: #fac939;
	position: absolute;
	bottom: -15rpx;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.menu-right {
	width: 80%;
  white-space: nowrap;
  overflow-x: scroll;
  display: flex;
	flex-wrap: nowrap;
	margin-left: 80rpx;
	/* justify-content: space-between; */
	font-size: 28rpx;
}
.menu-right .menu-item {
	border-bottom: 2px solid #f89e9e;
	padding: 0 10rpx;
	margin-right: 40rpx;
  /*float: left;*/
}
.menu-right .menu-item.active {
	position: relative;
	font-weight: 600;
	color: #000;
}
.filter {
	width: 95%;
	display: flex;
	justify-content: space-between;
	margin: 60rpx auto 20rpx;
}
.query-active{
	background-color: #fa8f47 !important;
	color: white !important;
	border-radius: 10rpx;
	box-shadow: 1rpx 1rpx 5rpx #ccc;
}
.filter-item {
  max-width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.filter-item image {
	width: 20rpx;
	height: 20rpx;
	margin-left: 10rpx;
}
.filter-wrapper {
	width: 95%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.filter-wrapper .items {
	width: 20%;
	background: #fff;
	border-radius: 10rpx;
	color: #000;
	padding: 10rpx 0;
	text-align: center;
}
.store {
	width: 95%;
	margin: 20rpx auto 160rpx;
}
.store-item {
	background: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	display: flex;
	margin-bottom: 20rpx;
}
.store-item image {
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
}
.store-item .right {
	width: calc(100% - 170rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.store-item .right .name {
	font-weight: 600;
}
.store-item .right .score {
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
	font-size: 26rpx;
	/* margin-top: 20rpx; */
}
.store-item .right .score .pinfen {
	display: flex;
}
.store-item .right .score .pinfen image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 5rpx;
}
.store-item .right .score .time {
	margin-left: auto;
}
.store-item .right .score .sales {
	margin-left: 10rpx;
}
.store-item .right .bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 26rpx;
}
.store-item .right .bottom .btn {
	padding: 2rpx 10rpx;
	background: #feca34;
	color: #333;
	border-radius: 10rpx;
}
.shop {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	right: 20rpx;
	bottom: 160rpx;
}
</style>
